<template>
	<div>
		<div>
			<input v-model="search" type="text" placeholder="要查询什么" @input="searching" />
		</div>
		<div class="pop-menu">
			<ul>
				<li v-for="item in matched">{{item}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
	module.exports = {
		data() {
			return {
				all: ["Apple", "Pear", "Orange", "Banana", "Cherry", "Walnut", "Pumpkin", "Strawberry", "Tomato", "Potato"],
				matched: [],
				search: "",
			};
		},
		methods: {
			searching() {
				this.matched.splice(0);
				let reg = new RegExp(this.search, "i");
				for (let i = 0; i < this.all.length; i++) {
					// if (this.all[i].search(this.search) != -1) {
					if (reg.test(this.all[i])) {
						this.matched.push(this.all[i]);
					}
				}
			}
		}
	}
</script>

<style>
	.pop-menu {
		z-index: 1;
		border: solid 1px #ddd;
		border-radius: 5px;
	}
</style>
